<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/11/14
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@include file="../common/IncludeTop.jsp"%>

<div id="Welcome">
    <div id="WelcomeContent">
        Welcome to MyPetStore!
    </div>
</div>

<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">
            <a href="viewCategory?categoryId=FISH"><img src="images/fish_icon.gif" /></a>
            <br/> Saltwater, Freshwater <br/>
            <a href="viewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
            <br /> Various Breeds <br />
            <a href="viewCategory?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
            <br /> Various Breeds, Exotic Varieties <br />
            <a href="viewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
            <br /> Lizards, Turtles, Snakes <br />
            <a href="viewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
            <br /> Exotic Varieties
        </div>

    </div>
    <script>

        // function show(obj,id) {
        //
        //     var objDiv = $("#"+id+"");
        //
        //     $(objDiv).css("display","block");
        //
        //     $(objDiv).css("left", event.clientX);
        //
        //     $(objDiv).css("top", event.clientY + 10);
        //
        // }
        //
        // function hide(obj,id) {
        //     var objDiv = $("#"+id+"");
        //
        //     $(objDiv).css("display", "none");
        //
        // }

        var xhr = new XMLHttpRequest();
        function showInform(categoryId) {
            //console.log(categoryId);
            xhr.open("GET","categoryShowServlet?categoryId=" + categoryId,true);
            xhr.onreadystatechange = process;
            xhr.send(null);
        }
        function process() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var resp = xhr.responseText;
                    //显示悬浮层
                    var inform = document.getElementById("inform");
                    inform.innerText = resp;
                    inform.style.display = "block";
                }
            }
        }
        function hiddenInform(event){
            var informDiv = document.getElementById('inform');
            var x=window.event.clientX;
            var y=window.event.clientY;
            var divx1 = informDiv.offsetLeft;
            var divy1 = informDiv.offsetTop;
            var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
            var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
            //alert("x:"+x+" divx1:"+divx1+" divx2:"+divx2+" y:"+y+" divy1:"+divy1+" divy2:"+divy2);
            if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
                //alert("a");
                document.getElementById('inform').style.display='none';
            }
        }

    </script>

    <div id="MainImage">
        <div id="MainImageContent">
            <map name="estoremap">
<%--                <area id="Birds" onMouseOver="javascript:show(this,'BirdsTip');" onMouseOut="hide(this,'BirdsTip')" alt="Birds" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" />--%>
<%--                <area id="Fish" onMouseOver="javascript:show(this,'FishTip');" onMouseOut="hide(this,'FishTip')" alt="Fish" coords="2,180,72,250" href="viewCategory?categoryId=FISH" shape="rect" />--%>
<%--                <area id="Dogs" onMouseOver="javascript:show(this,'DogsTip');" onMouseOut="hide(this,'DogsTip')" alt="Dogs" coords="60,250,130,320" href="viewCategory?categoryId=DOGS" shape="rect" />--%>
<%--                <area id="Reptiles" onMouseOver="javascript:show(this,'ReptilesTip');" onMouseOut="hide(this,'ReptilesTip')" alt="Reptiles" coords="140,270,210,340" href="viewCategory?categoryId=REPTILES" shape="rect" />--%>
<%--                <area id="Cats" onMouseOver="javascript:show(this,'CatsTip');" onMouseOut="hide(this,'CatsTip')" alt="Cats" coords="225,240,295,310" href="viewCategory?categoryId=CATS" shape="rect" />--%>
<%--                <area onMouseOver="javascript:show(this,'BirdsTip');" onMouseOut="hide(this,'BirdsTip')" alt="Birds" coords="280,180,350,250" href="viewCategory?categoryId=BIRDS" shape="rect" />--%>
    <area alt="Birds" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>
    <area alt="Fish" coords="2,180,72,250" href="viewCategory?categoryId=FISH" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform()" />
    <area alt="Dogs" coords="60,250,130,320" href="viewCategory?categoryId=DOGS" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>
    <area alt="Reptiles" coords="140,270,210,340" href="viewCategory?categoryId=REPTILES" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>
    <area alt="Cats" coords="225,240,295,310" href="viewCategory?categoryId=CATS" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>
    <area alt="Birds" coords="280,180,350,250" href="viewCategory?categoryId=BIRDS" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>
            </map>
            <img height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" />
            <div id="inform" style="display: none"></div>
        </div>
    </div>
    <div id="Separator">&nbsp;</div>

<%--    <div id="BirdsTip" style="position:absolute;display:none;border:1px solid silver;background:silver;">--%>
<%--        AV-CB-01	Amazon Parrot--%>
<%--        <br>--%>
<%--        AV-SB-02	Finch--%>
<%--    </div>--%>
<%--    <div id="FishTip" style="position:absolute;display:none;border:1px solid silver;background:silver;">--%>
<%--        FI-FW-01	Koi--%>
<%--        <br>--%>
<%--        FI-FW-02	Goldfish--%>
<%--        <br>--%>
<%--        FI-SW-01	Angelfish--%>
<%--        <br>--%>
<%--        FI-SW-02	Tiger Shark--%>
<%--    </div>--%>
<%--    <div id="DogsTip" style="position:absolute;display:none;border:1px solid silver;background:silver;">--%>
<%--        K9-BD-01	Bulldog--%>
<%--        <br>--%>
<%--        K9-CW-01	Chihuahua--%>
<%--        <br>--%>
<%--        K9-DL-01	Dalmation--%>
<%--        <br>--%>
<%--        K9-PO-02	Poodle--%>
<%--        <br>--%>
<%--        K9-RT-01	Golden Retriever--%>
<%--        <br>--%>
<%--        K9-RT-02	Labrador Retriever--%>
<%--    </div>--%>
<%--    <div id="ReptilesTip" style="position:absolute;display:none;border:1px solid silver;background:silver;">--%>
<%--        RP-LI-02	Iguana--%>
<%--        <br>--%>
<%--        RP-SN-01	Rattlesnake--%>
<%--    </div>--%>
<%--    <div id="CatsTip" style="position:absolute;display:none;border:1px solid silver;background:silver;">--%>
<%--        FL-DLH-02	Persian--%>
<%--        <br>--%>
<%--        FL-DSH-01	Manx--%>
<%--    </div>--%>


</div>


<%@include file="../common/IncludeBottom.jsp"%>